<template>
	<view class="location content">
		<view class="card">
			<view class="header">
				<view class="circle flex_r_around">
					<text></text>
				</view>
				<view class="text">接单位置</view>
			</view>
			<view class="address flex_r_between" @click="toChooseLocation">
				<view class="left flex">
					<uni-icons type="location-filled" :size="20" color="#2E7EFA"></uni-icons>
					<view style="max-width: 460rpx;" class="hidden">{{address}}</view>
				</view>
				<view class="right flex">
					<view>{{address ? '' : '请选择'}}</view>
					<uni-icons type="forward" :size="22" color="#ADADAD"></uni-icons>
				</view>
			</view>
			<view class="num flex_r_between">
				<view class="text">服务半径(km）</view>
				<view class="add flex">
					<uni-icons type="minus" :size="20" color="#979797" @click="sub"></uni-icons>
					<input type="text" disabled v-model="num">
					<uni-icons type="plus" :size="20" color="#979797" @click="add"></uni-icons>
				</view>
			</view>
		</view>
		<view class="map card">
			<view class="title flex">
				<view class="circle flex_r_around">
					<text></text>
				</view>
				<view class="text">服务位置</view>
			</view>
			<view class="map">
				<map id="map1"
					v-if="showMap"
					show-location ref="map1"
					:latitude="latitude" 
					:longitude="longitude"
					:circles="circles"
					scale="12"
					:markers="markers"
				></map>
			</view>
		</view>
		<view class="btn" @click="onSubmit">完 成</view>
	</view>
</template>

<script>
	var map;
	export default {
		computed:{
			circles(){
				return[
					{
						latitude: this.latitude,  
						longitude: this.longitude,  
						radius: this.radius,  
						strokeWidth: 3,  
						color: "#E10404FF",
						fillColor:"#FF00001A",
					}
				]
			},
			markers(){
				return [{
					id:1,
					latitude:this.latitude,
					longitude:this.longitude,
					iconPath:'/static/technician/map_center_icon.png'
				}]
			}
		},
		data() {
			return {
				num: 10, // 公里
				address:'',//地址
				showMap:false, //是否显示地图
				longitude:0,
				latitude:0,
				radius:1000 ,//地图圈大小
				flag:true,
			}
		},
		methods: {
			//确认修改
			ok(){
				this.$util.msg('修改成功')
			},
			//减
			sub(){
				this.num=this.num-1
				if(this.num<=10){
					this.num=10
					this.$util.msg('已经不能再减少了')
				}
				this.radius=this.num*1000
			},
			add(){
				if(this.num==30){
					this.num=30
					this.$util.msg('已经不能再增加了')
					return
				}
				this.num=this.num+1
				this.radius=this.num*1000
			},
			toChooseLocation(){
				uni.chooseLocation({
					success:res=>{
						this.address = res.address
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				})
			},
			
			onSubmit(){
				if(!this.flag){return}
				this.flag = false
				this.request.httpTokenRequest({
					url: "/technician.technician/saveAuthInfo",
					method: "post"
				}, {
					address:this.address,
					lng:this.longitude,
					lat:this.latitude,
					radius:this.num,
				}).then(data => {
					this.flag = true
					if (data.code == 0) {
						uni.redirectTo({
							url:'/otherpages/mine/complaint'
						})
					}
				}, error => {})
			}
		},
		onLoad() {
			map=uni.createMapContext('map1',this)
			if(uni.getStorageSync('authInfo').lat){
				this.longitude = uni.getStorageSync('authInfo').lng
				this.latitude = uni.getStorageSync('authInfo').lat
				this.num = uni.getStorageSync('authInfo').radius
				this.radius=this.num*1000
				this.address= uni.getStorageSync('authInfo').address
				if(this.longitude!==0){
					this.showMap=true
				}
			}else {
				this.latitude = this.$store.state.userLocation.latitude
				this.longitude = this.$store.state.userLocation.longitude
				this.num = 30
				this.radius=30000
				this.latitude = this.$store.state.userLocation.latitude
				this.address= this.$store.state.userLocation.city
				if(this.longitude!==0){
					this.showMap=true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.location {
		padding: 30rpx;
	}

	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;

		.header {
			display: flex;
			align-items: center;

			.circle {
				width: 40rpx;
				height: 40rpx;
				background: #F5F7F8;
				border-radius: 50%;
				margin-right: 10rpx;

				text {
					width: 10rpx;
					height: 10rpx;
					background: #B9D2F8;
					border-radius: 50%;
				}
			}

			.text {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}
		}

		.address {
			margin: 31rpx 0 0;
			padding-bottom: 31rpx;
			border-bottom: 1rpx solid #E4E4E4;

			.left {
				view {
					font-size: 26rpx;
					color: #08090A;
					line-height: 37rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #ADADAD;
				line-height: 33rpx;
			}
		}

		.num {
			align-items: center;
			margin-top: 20rpx;

			.text {
				font-size: 26rpx;
				color: #08090A;
				line-height: 37rpx;
			}

			.add {
				input {
					width: 88rpx;
					height: 44rpx;
					background: #E4E5E7;
					border-radius: 8rpx;
					text-align: center;
					line-height: 44rpx;
				}
			}
		}
		
		
	
	}
	
	.map {
		margin-top: 30rpx;
		width: 100%;
		map {
			width: 100%;
		}
		
		.circle {
			width: 40rpx;
			height: 40rpx;
			background: #F5F7F8;
			border-radius: 50%;
			margin-right: 10rpx;
		
			text {
				width: 10rpx;
				height: 10rpx;
				background:#F8BEAD;
				border-radius: 50%;
			}
		}
		.text {
			font-size: 30rpx;
			color: #08090A;
			line-height: 42rpx;
		}
		
		map {
			height: 745rpx;
		}
	}
	
	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #2E7EFA;
		border-radius: 44rpx;
		margin-top: 64rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
	
</style>